<!--
 * @Description: 右侧抽屉区域
 * @Author: wangfuwei
 * @Date: 2020-12-02 21:35:06
 * @LastEditors: wangfuwei
 * @LastEditTime: 2021-04-24 22:07:43
 * @FilePath: /horizon-frontend/src/components/SettingDrawer/SettingDrawer.vue
-->
<template>
  <a-drawer width="300px" placement="right" @close="onClose" :closable="false" :maskStyle="{ 'background-color': 'rgba(0,0,0,0)' }" wrapClassName="setting-drawer" :visible="visible">
    <div class="header" :style="headerStyle">
      <div class="info">
        <div style="padding-top:25px">
          <a-avatar size="large" :src="avatar" icon="user" />
          <div style="width:200px;float:left">
            <div class="name">{{ nickname }}</div>
            <div class="dept">{{ dept }}</div>
          </div>
        </div>
      </div>
      <div class="motto">
        <Ellipsis :length="70">
          {{ randomMotto }}
        </Ellipsis>
      </div>
    </div>

    <div class="content">
      <a-card :bordered="false">
        <a-row>
          <a-col :span="6">
            <span class="title">风格</span>
          </a-col>
          <a-col :span="16">
            <div class="color-div"></div>
            <span class="color-span">{{ colorTitle }}</span>
          </a-col>
          <a-col :span="2">
            <a-icon type="swap" @click="selColor = !selColor" />
          </a-col>
        </a-row>

        <div v-show="selColor">
          <a-divider />
          <div>
            <a-tag v-for="item in primaryColors" :key="item.color" :color="item.color" @click="changeColor(item.color)" class="color-block">
              <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
            </a-tag>
          </div>
          <a-divider />
        </div>

        <a-row>
          <a-col :span="6">
            <span class="title">语言</span>
          </a-col>
          <a-col :span="16">
            <span>中文</span>
          </a-col>
          <a-col :span="2">
            <a-icon type="swap" />
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="6">
            <span class="title">色弱模式</span>
          </a-col>
          <a-col :span="18">
            <a-switch size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
          </a-col>
        </a-row>
      </a-card>
    </div>

    <div class="footer">
      <a-row>
        <a-col :span="7" class="btn">设置</a-col>
        <a-col :span="1">
          <a-divider type="vertical" />
        </a-col>
        <a-col :span="8" class="btn">关于产品</a-col>
        <a-col :span="1">
          <a-divider type="vertical" />
        </a-col>
        <a-col :span="7" class="btn" @click="handleLogout">退出</a-col>
      </a-row>
    </div>
  </a-drawer>
</template>

<script>
import { appMixin } from "@/utils/mixin";
import { mapActions } from "vuex";
import Ellipsis from "@/components/Ellipsis";
import { getMotto } from "@/api/system";
import { primaryColors } from "./settingConfig";
import { LOGIN_PATH } from "@/core/const";

export default {
  mixins: [appMixin],
  components: {
    Ellipsis,
  },
  data() {
    return {
      visible: false,
      selColor: false,
      headerStyle: {
        "background-color": "",
        "background-image": "",
      },
      colorTitle: "",
      randomMotto: "",
      primaryColors: primaryColors,
    };
  },
  mounted() {
    this.changeColor(this.primaryColor);
    this.motto();
  },
  methods: {
    ...mapActions("app", ["setPrimaryColor", "setColorWeak"]),
    ...mapActions("user", ["logout"]),
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.selColor = false;
      this.motto();
    },
    onColorWeak(checked) {
      this.setColorWeak(checked);
    },
    changeColor(color) {
      if (!color) return;
      this.setPrimaryColor(color);
      const colorObj = this.primaryColors.find(item => item.color === color);
      if (!colorObj) return;
      this.headerStyle["background-color"] = color;
      this.headerStyle["background-image"] = `url(${colorObj.img})`;
      this.colorTitle = colorObj.title;
      this.selColor = false;
    },
    motto() {
      getMotto().then(data => (this.randomMotto = data));
    },
    handleLogout() {
      this.$confirm({
        content: "确定退出登录吗？",
        onOk: () => this.logout().then(() => this.$router.push({ path: LOGIN_PATH })),
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~ant-design-vue/lib/style/themes/default";

.setting-drawer /deep/ .ant-drawer-body {
  height: 100vh;
  background: #f0f2f5;
  padding: 0;
}

.setting-drawer {
  .header {
    height: 140px;
    padding: 0 20px;
    color: rgb(255, 255, 255);
    font-size: 14px;

    .info {
      height: 90px;

      .ant-avatar {
        margin-right: 20px;
        float: left;
      }

      .name,
      .dept {
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .dept {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .motto {
      height: 50px;
      text-align: left;
      overflow: hidden;
    }
  }

  .content {
    height: calc(100% - 180px);
    overflow: hidden;

    /deep/ .ant-card {
      margin: 8px;
      font-size: 12px;
    }

    /deep/ .ant-card-body {
      padding: 10px 15px;
    }

    /deep/ .ant-row {
      height: 30px;
      line-height: 30px;
    }

    /deep/ .ant-divider-horizontal {
      margin: 10px 0;
    }

    /deep/ .anticon {
      cursor: pointer;
      &:hover {
        color: @primary-color;
      }
    }

    .title {
      color: rgb(153, 153, 153);
    }

    .color-div {
      width: 12px;
      height: 12px;
      float: left;
      top: 9px;
      position: relative;
      border-radius: 2px;
      margin-right: 10px;
      background: @primary-color;
    }
    .color-span {
      color: @primary-color;
    }

    .color-block {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      cursor: pointer;
      margin-right: 10px;

      i {
        font-size: 28px;
        position: relative;
        float: left;
        top: 4px;

        &.anticon-check {
          color: #fff;
        }
      }
    }
  }

  .footer {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    text-align: center;
    background: #fff;

    /deep/ .ant-divider-vertical {
      height: 20px;
    }

    .btn {
      cursor: pointer;
      &:hover {
        color: @primary-color;
      }
    }
  }
}
</style>
